<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>有财管家</title>
    <link href="lib/zui/css/zui.min.css" rel="stylesheet">
    <link href="css/youcai/all.css" rel="stylesheet">
    <link href="lib/zui/lib/datatable/zui.datatable.min.css" rel="stylesheet">
    <link href="lib/zui/lib/bootbox/bootbox.min.css" rel="stylesheet">
</head>

<body>
<div class="containter">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <!-- 导航头部 -->
            <div class="navbar-header">

                <ul class="nav nav-stacked">
                    <li class="nav-heading">
                        <a class="navbar-brand" href="#">有财管家</a>
                    </li>
                </ul>
            </div>
            <!-- 导航项目 -->
            <div class="collapse navbar-collapse">
                <!-- 右侧的导航项目 -->
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="login.html">登录</a></li>
                    <li><a href="login.html">退出</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">更多<i
                                class="icon icon-caret-down"></i></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#" role="menuitem">帮助</a></li>
                            <li><a href="#" role="menuitem">操作说明</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- END .navbar-collapse -->
        </div>
    </nav>
    <div class="row mycontainter">
        <div class="col-md-2 col-md-offset-1">
            <div class="mymenu">
                <nav class="menu" data-ride="menu" style="width: 200px">
                    <ul id="treeMenu" class="tree tree-menu" data-ride="tree">
                        <li><a href="#"><i class="icon icon-th"></i>首页</a></li>
                        <li><a href="#"><i class="icon icon-user"></i>用户管理</a></li>
                        <li>
                            <a href="#"><i class="icon icon-list-ul"></i>订单管理</a>
                            <ul>
                                <li><a href="#">订单列表管理</a></li>
                                <li><a href="#">订单状态管理</a></li>
                                <li><a href="#">订单分析</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="icon icon-flag"></i>还款管理</a></li>
                        <li><a href="#"><i class="icon icon-flag"></i>打款管理</a></li>
                        <li class="open">
                            <a href="#"><i class="icon icon-tasks"></i>系统状态</a>
                            <ul>
                                <li>
                                    <a href="#"><i class="icon icon-circle-blank"></i>已就绪</a>
                                    <ul>
                                        <li><a href="#">已取消</a></li>
                                        <li><a href="#">已关闭</a></li>
                                    </ul>
                                </li>
                                <li class="active"><a href="#"><i class="icon icon-play-sign"></i>进行中</a></li>
                                <li><a href="#"><i class="icon icon-ok-sign"></i>已完成</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="col-md-8">
            <div class="btn-group col-md-offset-11" id="createrecord">
                <a href="/story-create-4-0-0.html" class="btn btn-primary" data-toggle="modal"
                   data-target="#addModal"><i class="icon icon-plus"></i>添加</a>
            </div>

            <div class="mycontent" id="mycontent">
                <table class="table datatable table-striped ">
                    <thead>
                    <tr>
                        <th data-type="number" width="80px">#</th>
                        <th data-type="date" width="160px">时间</th>
                        <th>用户名</th>
                        <th>真实姓名</th>
                        <th>邮箱</th>
                        <th>电话</th>
                        <th class="sort-disabled" width="80px">操作</th>
                    </tr>
                    </thead>

                </table>
            </div>
            <div class="containter">
                <div class="row">
                    <div class="col-md-offset-3" id="mypager">
                        <!--<ul class="pager pull-left">-->
                            <!---->
                        <!--</ul>-->
                        <ul class="pager pager-pills">
                            <li><a title="首页"><i class="icon icon-step-backward first"></i></a></li>
                            <li><a title="上一页"><i class="icon icon-play icon-flip-horizontal previous"></i></a></li>
                            <li><a title="当前页码" class="currentPage"><input type="text" value="1"> /
                                <lable>10</lable>
                            </a></li>
                            <li><a title="下一页"><i class="icon icon-play next"></i></a></li>
                            <li><a title="尾页"><i class="icon icon-step-forward last"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--<div class="alert alert-success"　id="successAlert">操作成功</div>-->
<!--<div class="alert alert-warning" id="failAlert">操作失败</div>-->
<div id="addModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span
                        aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title">增加用户</h4>
            </div>
            <div class="modal-body">
                <form id="addForm" class="form-horizontal">
                    <div class="form-group">
                        <label for="exampleInputAccountAdd" class="col-sm-2">账号</label>
                        <div class="col-md-6 col-sm-10">
                            <input type="text" class="form-control required" vtype="minLength:10"
                                   name="exampleInputAccount" id="exampleInputAccountAdd"
                                   placeholder="电子邮件/手机号/用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPasswordAdd" class="col-sm-2">密码</label>
                        <div class="col-md-6 col-sm-10">
                            <input type="password" class="form-control required" vtype="minLength:10"
                                   name="exampleInputPassword" id="exampleInputPasswordAdd"
                                   placeholder="密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputAddress1Add" class="col-sm-2">地址</label>
                        <div class="col-sm-3">
                            <select class="form-control required" name="exampleInputAddress1"
                                    id="exampleInputAddress1Add">
                                <option>北京</option>
                                <option>上海</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="addModalSure">确认</button>
            </div>
        </div>
    </div>
</div>


<div id="editModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span
                        aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title">修改用户</h4>
            </div>
            <div class="modal-body">
                <form id="editForm" class="form-horizontal">
                    <div class="form-group">
                        <label for="exampleInputAccountEdit" class="col-sm-2">账号</label>
                        <div class="col-md-6 col-sm-10">
                            <input type="text" class="form-control required" vtype="minLength:10"
                                   name="exampleInputAccount" id="exampleInputAccountEdit"
                                   placeholder="电子邮件/手机号/用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPasswordEdit" class="col-sm-2">密码</label>
                        <div class="col-md-6 col-sm-10">
                            <input type="password" class="form-control required" vtype="minLength:10"
                                   name="exampleInputPassword" id="exampleInputPasswordEdit"
                                   placeholder="密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputAddress1Edit" class="col-sm-2">地址</label>
                        <div class="col-sm-3">
                            <select class="form-control required" id="exampleInputAddress1Edit"
                                    name="exampleInputAddress1">
                                <option>北京</option>
                                <option>上海</option>
                            </select>
                        </div>

                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="editModalSure">确认</button>
            </div>
        </div>
    </div>
</div>

<div id="delModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span
                    aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
            <h4 class="modal-title">删除用户</h4>
        </div>
        <div class="modal-content">
            <!-- dialog body -->
            <div class="modal-body">确认删除用户</div>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" id="delModalSure">确认</button>
        </div>
    </div>
</div>

<div class="modal fade" id="successResult">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="alert alert-success">操作成功</div>
        </div>
    </div>
</div>

<div class="modal fade" id="failResult">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="alert alert-warning">操作失败</div>
        </div>
    </div>
</div>


<script src="lib/zui/lib/jquery/jquery.js"></script>
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>-->
<script src="lib/zui/js/zui.min.js"></script>
<script src="lib/zui/lib/datatable/zui.datatable.min.js"></script>
<script src="lib/zui/lib/bootbox/bootbox.min.js"></script>
<script src="js/youcai/demo.js"></script>
<script src="js/youcai/tool.js"></script>
<script>


</script>
</body>

</html>